const {Card, Button, Input, Select, Icon, TreeSelect, DatePicker, Table, Row, Col} = antd;
const {MonthPicker, RangePicker} = DatePicker;
const Option = Select.Option;
const TreeNode = TreeSelect.TreeNode;

const dateFormat = 'YYYY/MM/DD';
const columns = [{
    title: 'Name',
    dataIndex: 'name',
}, {
    title: 'Age',
    dataIndex: 'age',
}, {
    title: 'Address',
    dataIndex: 'address',
}];

const data = [];
for (let i = 0; i < 46; i++) {
    data.push({
        key: i,
        name: `Edward King ${i}`,
        age: 32,
        address: `London, Park Lane no. ${i}`,
    });
}
class ContainerDetail extends React.Component {
    state = {
        selectedRowKeys: [], // Check here to configure the default column
        loading: false,
        pagination: {
            showSizeChanger: true,
            pageSizeOptions: ['6', '8', '10'],
            defaultPageSize: "6"
        }
    };
    start = () => {
        this.setState({loading: true});
        // ajax request after empty completing
        setTimeout(() => {
            this.setState({
                selectedRowKeys: [],
                loading: false,
            });
        }, 1000);
    }
    onSelectChange = (selectedRowKeys) => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.setState({selectedRowKeys});
    }

    render() {
        const {selectedRowKeys} = this.state;
        const {pagination} = this.state;
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
            hideDefaultSelections: true,
            selections: [{
                key: 'all-data',
                text: 'Select All Data',
                onSelect: () => {
                    this.setState({
                        selectedRowKeys: [...Array(46).keys()], // 0...45
                    });
                },
            }, {
                key: 'odd',
                text: 'Select Odd Row',
                onSelect: (changableRowKeys) => {
                    let newSelectedRowKeys = [];
                    newSelectedRowKeys = changableRowKeys.filter((key, index) => {
                        if (index % 2 !== 0) {
                            return false;
                        }
                        return true;
                    });
                    this.setState({selectedRowKeys: newSelectedRowKeys});
                },
            }, {
                key: 'even',
                text: 'Select Even Row',
                onSelect: (changableRowKeys) => {
                    let newSelectedRowKeys = [];
                    newSelectedRowKeys = changableRowKeys.filter((key, index) => {
                        if (index % 2 !== 0) {
                            return true;
                        }
                        return false;
                    });
                    this.setState({selectedRowKeys: newSelectedRowKeys});
                },
            }],
            onSelection: this.onSelection,
        };
        return (

            <div>
                <Card

                    type="inner"
                    title="基本信息"

                >
                    <div>
                        <Row>

                            <Col span={8}>
                                <span style={{color:"#999"}}>任务名称：</span>
                                <span style={{color:"#666"}}>春节开盘蓄客</span>
                            </Col>
                            <Col span={8}>
                                <span style={{color:"#999"}}>结束时间：</span>
                                <span style={{color:"#666"}}>2017/02/02 15:30</span>
                            </Col>
                            <Col span={8}>
                                <span style={{color:"#999"}}>创建时间：</span>
                                <span style={{color:"#666"}}>2017/02/02 15:30</span>
                            </Col>
                        </Row>
                    </div>
                </Card>

                <div style={{textAlign:"center",padding:"10px 0"}}>
                    <Button type="primary" style={{marginRight:"20px"}}>
                        <a href="page.html">保存</a>
                    </Button>
                    <Button >
                        <a href="page.html"> 取消</a>
                    </Button>
                </div>

                <Table columns={columns} dataSource={data} pagination={pagination}/>
            </div>
        );
    }
}